<!DOCTYPE html>
<html>
<head>
    <head>
        <title>用户登录</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta http-equiv="Content-Language" content="zh-CN"/>
        <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
        <link rel="stylesheet" href="__CSS__/my.css">
        <style type="text/css">
            .form-bg {
                background: #00b4ef;
            }

            .form-horizontal {
                background: #fff;
                padding-bottom: 40px;
                border-radius: 15px;
                text-align: center;
            }

            .heading {
                display: block;
                color: #888888;
                font-size: 35px;
                font-weight: 400;
                padding: 25px 0;
                border-bottom: 1px solid #f0f0f0;
                margin-bottom: 20px;
                text-align: center;
            }

            .form-horizontal .form-group {
                padding: 0 40px;
                margin: 0 0 25px 0;
                position: relative;
            }

            .form-horizontal .form-control {
                background: #f0f0f0;
                border: none;
                border-radius: 20px;
                box-shadow: none;
                padding: 0 20px 0 45px;
                height: 40px;
                transition: all 0.3s ease 0s;
            }

            .form-horizontal .form-control:focus {
                background: #e0e0e0;
                box-shadow: none;
                outline: 0 none;
            }

            .form-horizontal .form-group i {
                position: absolute;
                top: 12px;
                left: 60px;
                font-size: 17px;
                color: #c8c8c8;
                transition: all 0.5s ease 0s;
            }

            .form-horizontal .form-control:focus + i {
                color: #00b4ef;
            }

            .form-horizontal .fa-question-circle {
                display: inline-block;
                position: absolute;
                top: 12px;
                right: 60px;
                font-size: 20px;
                color: #808080;
                transition: all 0.5s ease 0s;
            }

            .form-horizontal .fa-question-circle:hover {
                color: #000;
            }

            .form-horizontal .main-checkbox {
                float: left;
                width: 20px;
                height: 20px;
                background: #11a3fc;
                border-radius: 50%;
                position: relative;
                margin: 5px 0 0 5px;
                border: 1px solid #11a3fc;
            }

            .form-horizontal .main-checkbox label {
                width: 20px;
                height: 20px;
                position: absolute;
                top: 0;
                left: 0;
                cursor: pointer;
            }

            .form-horizontal .main-checkbox label:after {
                content: "";
                width: 10px;
                height: 5px;
                position: absolute;
                top: 5px;
                left: 4px;
                border: 3px solid #fff;
                border-top: none;
                border-right: none;
                background: transparent;
                opacity: 0;
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

            .form-horizontal .main-checkbox input[type=checkbox] {
                visibility: hidden;
            }

            .form-horizontal .main-checkbox input[type=checkbox]:checked + label:after {
                opacity: 1;
            }

            .form-horizontal .text {
                float: left;
                margin-left: 7px;
                line-height: 20px;
                padding-top: 5px;
                text-transform: capitalize;
            }

            .form-horizontal .btn {
                float: right;
                font-size: 14px;
                color: #fff;
                background: #00b4ef;
                border-radius: 30px;
                padding: 10px 25px;
                border: none;
                text-transform: capitalize;
                transition: all 0.5s ease 0s;
            }

            .body-gray {
                background: #DDDDDD;
            }

            @media only screen and (max-width: 479px) {
                .form-horizontal .form-group {
                    padding: 0 25px;
                }

                .form-horizontal .form-group i {
                    left: 45px;
                }

                .form-horizontal .btn {
                    padding: 10px 20px;
                }
            }
        </style>
    </head>
<body class="body-gray">


<div class="container shadow">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <form class="form-horizontal" id="form" method="post">
                <span class="heading" id="head">用户登录</span>
                <div class="form-group">
                    <input type="text" id="username" class="form-control" placeholder="用户名">
                    <i class="glyphicon glyphicon-user"></i>
                </div>
                <div class="form-group help">
                    <input type="password" id="password" class="form-control" placeholder="密　码">
                    <i class="glyphicon glyphicon-lock"></i>
                </div>
                <div id="success" hidden="true" class="alert alert-success" role="alert">登录成功</div>
                <div id="failed" hidden="true" class="alert alert-warning" role="alert">登录失败，用户名或密码错误</div>
                <div class="form-group">
                    <div class="main-checkbox">
                        <input type="checkbox" value="None" id="checkbox1" name="check"/>
                        <label for="checkbox1"></label>
                    </div>
                    <span class="text">Remember me</span>
                    <button type="button" id="submit" class="btn btn-default">登录</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script src="__JS__/jquery-3.2.1.min.js"></script>
<script src="__JS__/jquery.cookie.js"></script>
<script src="__JS__/bootstrap.min.js"></script>
<script type="text/javascript">

    $("#submit").click(function () {
//        alert($.cookie('url_before_login'));
        if ($.cookie('url_before_login')) {
            var url = $.cookie('url_before_login');
            if (url.indexOf(window.location.host) != -1) {
                var url_ajax = url;
            } else {
                $.removeCookie('url_before_login');
                var url_ajax = "{:url('index/Index/index')}";
            }
        } else {
            var url_ajax = "{:url('index/Index/index')}";
        }

        $.ajax({
            type: "post",
            url: "{:url('user/Index/checkIn')}",
            dataType: "json",
            data: {"username": $("#username").val(), "password": $("#password").val()},
            success: function (data) {
                console.info(data);
                if (data == 1) {
                    $("#failed").hide(200);
                    $("#success").slideDown(500, function () {
                        window.location.href = url_ajax;
                    });
                } else {
                    $("#failed").hide(200);
                    $("#failed").show(500);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    });
    $(document).keyup(function (event) {
        if (event.keyCode == 13) {
            $("#submit").trigger("click");
        }
    });

</script>
</html>